import {Component, OnInit} from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})

export class AppComponent implements OnInit {
  private  p_test_status: boolean;
  private  currentClass: {};
  private  p_yellow_status: boolean;
  private  currentClassYellow: {};
  private  currentStyles: {};
  private  p_style_status: boolean;
  private  currenStyleYellow: {};
  private  p_style_yellow_status: boolean;
  constructor() {
    this.p_test_status = true;
    this.p_yellow_status = false;
    this.p_style_status = true;
    this.p_style_yellow_status = false;
    this.setClass();
    this.setStyles();
    this.setStyleYellow();
  }
  ngOnInit() {

  }
  test_ngClass(): void {
    this.p_test_status = false;
    this.setClass();
  }
  setClass() {
    this.currentClass = {
      test_class_red: !this.p_test_status,
      test_class_blue: this.p_test_status,
    };
  }
  test_class_yellow() {
    this.p_yellow_status = true;
    this.currentClassYellow = {
      test_class_yellow: this.p_yellow_status,
    };
  }

  test_ngStyle() {
    this.p_style_status = false;
    this.setStyles();
  }
  setStyles() {
    this.currentStyles = {
    'color': this.p_style_status ? 'red' : 'green'
    };
  }
  test_style_yellow() {
    this.p_style_yellow_status = true;
    this.setStyleYellow();
  }
  setStyleYellow() {
    this.currenStyleYellow = {
      'font-size':   this.p_style_yellow_status    ? '24px'   : '12px'
    };
  }
}
